<template>
	<view class="page">
		<view class="container">
			<view class="tn-strip-bottom-min item">
				<view class="justify-content-item">
					<view class="tn-text-bold tn-text-lg">
						原密码：
					</view>
					<uv-input type="password" border="bottom" v-model="old_password" placeholder="请输入原密码"></uv-input>
				</view>
			</view>
		
			<view class="tn-strip-bottom-min item">
				<view class="justify-content-item">
					<view class="tn-text-bold tn-text-lg">
						新密码：
					</view>
					<uv-input type="password" border="bottom" v-model="new_password" placeholder="请输入新密码"></uv-input>
				</view>
			</view>
			
			<view class="tn-strip-bottom-min item">
				<view class="justify-content-item">
					<view class="tn-text-bold tn-text-lg">
						确认密码：
					</view>
					<uv-input type="password" border="bottom" v-model="new_password2" placeholder="再次输入新密码"></uv-input>
				</view>
			</view>
		</view>
		
		<!-- 悬浮按钮-->
		<view class="tn-flex  tn-footerfixed">
			<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center" @click="handleSave">
				<tn-button shape="round" backgroundColor="#5677fc" padding="40rpx 0" width="60%" shadow
					fontBold>
					<text class="tn-color-white">保存</text>
				</tn-button>
			</view>
		</view>
	</view>
</template>

<script>
	import userApi from "@/exam/common/api/user.js";
	import tnButton from '@/exam/tuniao-ui/components/tn-button/tn-button.vue';
	
	export default {
		components: {
			tnButton
		},
		data() {
			return {
				new_password: '',
				new_password2: '',
				old_password: '',
			}
		},
		onLoad() {
			
		},

		methods: {
			/**
			 * 保存按钮
			 */
			handleSave() {
				let data = {
					new_password: this.new_password,
					new_password2: this.new_password2,
					old_password: this.old_password,
				}
				// 校验
				if (!data.old_password) {
					this.utils.alert('原密码不能为空');
					return;
				}
				if (!data.new_password) {
					this.utils.alert('新密码不能为空');
					return;
				}
				if (!data.new_password2) {
					this.utils.alert('确认密码不能为空');
					return;
				}
				
				// 密码强度校验
				if (data.new_password.length < 8) {
					this.utils.alert('新密码长度必须为8位以上');
					return;
				}
				
				// 检查是否包含字母、数字和特殊字符
				const hasLetter = /[a-zA-Z]/.test(data.new_password);
				const hasNumber = /[0-9]/.test(data.new_password);
				const hasSpecial = /[!@#$%^&*(),.?":{}|<>]/.test(data.new_password);
				
				if (!hasLetter || !hasNumber || !hasSpecial) {
					this.utils.alert('新密码必须包含字母、数字和特殊字符');
					return;
				}
				
				// 检查两次密码是否一致
				if (data.new_password !== data.new_password2) {
					this.utils.alert('两次输入的密码不一致');
					return;
				}
				
				userApi.modifyPassword(this, data).then(res => {
					if (!!res.code) {
						uni.showToast({
							icon: "none",
							title: res.msg
						})
						setTimeout(()=>{
							uni.reLaunch({
								url:"/pages/member/login"
							})
						},1000)
					}
					else {
						uni.showToast({
							icon: "error",
							title: res.msg
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff !important;
	}
	
	.container {
		padding: 20rpx;
		
		.item {
			margin-top: 30rpx;
		}
	}
	
	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 60%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;
	
		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}
	
	}
	
	
	/* 间隔线 start*/
	.tn-strip-bottom-min {
		width: 100%;
		border-bottom: 1rpx solid #F8F9FB;
	}
	
	.tn-strip-bottom {
		width: 100%;
		border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
	}
	
	/* 间隔线 end*/
	
	
	/* 用户头像 start */
	.logo-image {
		width: 80rpx;
		height: 80rpx;
		position: relative;
	}
	
	.logo-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border: 2rpx solid rgba(255, 255, 255, 0.05);
		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 50%;
		overflow: hidden;
		// background-color: #FFFFFF;
	}
	
	.avatar-wrapper {
		background: none;
	}
	
	/* 底部悬浮按钮 start*/
	.tn-tabbar-height {
		min-height: 100rpx;
		height: calc(120rpx + env(safe-area-inset-bottom) / 2);
	}
	
	.tn-footerfixed {
		position: fixed;
		width: 100%;
		bottom: calc(30rpx + env(safe-area-inset-bottom));
		z-index: 1024;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);
	
	}
	/* 底部悬浮按钮 end*/
</style>